<template>
  <!-- <page-header-wrapper> -->
  <div>

    <a-card :bordered="false">
      <p class="tips_title">全区企业分布情况统计</p>
      <a-row type="flex" justify="start">
        <a-card v-for="(item, index) in items" :key="index" class="box">
          <a-row type="flex">
            <a-row type="flex">
              <i class=" iconfont icon_qiye icon-qiye1"></i>
              <div>
                <p class="font">{{ item.name }}</p>
                <p class="num mouseOn">
                  <countTo :startVal="startVal" :endVal="item.endVal" :duration="5000"></countTo>
                </p>
              </div>
            </a-row>
          </a-row>
        </a-card>
      </a-row>
    </a-card>
    <a-card style="margin-top: 10px">
      <div style="display: flex">
        <div class="flex-1" id="map" style="height: 654px; width: 100%; margin-right: auto"></div>
        <div class="flex-1">
          <p class="area_title">龙华区各街道企业分布数</p>
          <div id="enterprise" style="height: 383px;  width: 100%;"></div>
        </div>
      </div>
    </a-card>
  </div>
  <!-- </page-header-wrapper> -->
</template>

<script>
import countTo from 'vue-count-to'
export default {
  components: { countTo },
  data() {
    return {
      startVal: 0,
      // endVal:341234,
      items: [{ name: '全区企业总数', index: 0, endVal: 341234 }],
    }
  },
  methods: {
    InitChart() {
      let enterprise = this.$echarts.init(document.getElementById('enterprise'))
      var dfColor = {
        type: 'linear',
        x: 0,
        y: 0,
        x2: 1,
        y2: 0,
        colorStops: [
          {
            offset: 1,
            color: '#0489f0', // 0% 处的颜色
          },
          {
            offset: 0,
            color: '#28d9e8', // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      }
      var provRank = ['全区', '观澜街道', '大浪街道', '龙华街道', '民治街道', '福城街道', '观湖街道']
      const option = {
        backgroundColor: '#ffffff',
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },

          formatter: function (objs, index) {
            let obj = objs[0]
            return `${obj.name}<br/>${obj.marker}${obj.seriesName} : ${obj.value} `
          },
        },
        grid: {
          top: '3%',
          left: '3%',
          right: '2%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: 'category',
          boundaryGap: false,
          inverse: true, //反向
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            margin: 18,
            formatter: function (value, index) {
              var ind = index + 1
              if (ind == 1) {
                return '{a|' + value + '}'
              } else if (ind == 2) {
                return '{b|' + value + '}'
              } else if (ind == 3) {
                return '{c|' + value + '}'
              } else {
                return '{d|' + value + '}'
              }
            },
            rich: {
              a: {
                color: '#303133',
              },
              b: {
                color: '#303133',
              },
              c: {
                color: '#303133',
              },
              d: {
                color: '#303133',
              },
            },
          },
          data: provRank,
        },
        series: [
          {
            name: '',
            barMaxWidth: 20,
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'insideLeft',
                formatter: '{c}',
                textStyle: {
                  color: '#fff',
                },
              },
            },
            data: [
              {
                value: 110,
                itemStyle: {
                  color: '#e9284f',
                },
              },
              {
                value: 20,
                itemStyle: {
                  color: '#4472f1',
                },
              },
              {
                value: 40,
                itemStyle: {
                  color: '#429ef1',
                },
              },
              {
                value: 30,
                itemStyle: {
                  color: '#54e2be',
                },
              },
              {
                value: 40,
                itemStyle: {
                  color: '#28d2d9',
                },
              },
              {
                value: 50,
                itemStyle: {
                  color: '#fb8e64',
                },
              },
              {
                value: 60,
                itemStyle: {
                  color: '#ff9f00',
                },
              },
            ],
          },
        ],
      }
      enterprise.setOption(option)
    },
    initMap() {
      let uploadedDataURL = require('../../assets/LongHua.json')
      let name = 'bj'
      let myChart = this.$echarts.init(document.getElementById('map'))
      this.$echarts.registerMap(name, uploadedDataURL)
      const option = {
        backgroundColor: '#ffffff',
        title: {
          text: '',
          left: 'center',
          textStyle: {
            color: '#ffffff',
          },
        },
        visualMap: {
          min: 0,
          max: 45000,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 文本，默认为数值文本
          calculable: false,
          inRange: {
            color: ['#dbe7ff', '#dbe7ff', '#dbe7ff'],
          },
          textStyle: {
            color: '#ffffff',
          },
        },
        series: [
          {
            type: 'map',
            mapType: name,
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                textStyle: {
                  color: '#fff',
                },
              },
            },
            itemStyle: {
              normal: {
                borderColor: '#bccdf5',
                areaColor: '#fff',
              },
              emphasis: {
                areaColor: '#4472f1',
                borderWidth: 1,
              },
            },
            animation: false,
            roam: true,
            data: [
              {
                name: '福城街道',
                value: 18163,
              },
              {
                name: '大浪街道',
                value: 22036,
              },
              {
                name: '观湖街道',
                value: 39825,
              },
              {
                name: '龙华街道',
                value: 50040,
              },
              ,
              {
                name: '民治街道',
                value: 40000,
              },
              ,
              {
                name: '观澜街道',
                value: 2840,
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
  },
  mounted() {
    this.InitChart()
    this.initMap()
  },
}
</script>

<style lang="less" scoped>
.tips_title {
  font-size: 22px;
  color: #303133;
  border-bottom: 1px solid #e8e8e8;
  padding-bottom: 15px;
}

.box {
  width: 100%;
  margin-top: 20px;
  background-color: #f5f7fa;
  .icon_qiye {
    width: 102px;
    height: 102px;
    background-color: #2a51bc;
    color: #fff;
    border-radius: 100%;
    font-size: 54px;
    line-height: 102px;
    text-align: center;
    margin-right: 20px;
  }
}
.image {
  background-image: url(../../assets/logo.png);
  background-size: contain;
  //设置背景图片不平铺
  background-repeat: no-repeat;
  width: 60px;
  height: 60px;
  margin-right: 30px;
}
.font {
  font-family: '微软雅黑 Regular', '微软雅黑';
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color: #303133;
  margin-top: 20px;
  margin-bottom: 0 !important;
}
.num {
  font-family: '微软雅黑 Regular', '微软雅黑';
  font-weight: 400;
  font-style: normal;
  font-size: 28px;
  color: #2a51bc;
}
.mouseOn:hover {
  cursor: pointer;
  color: #1890ff !important;
}

.area_title {
  font-size: 22px;
  color: #303133;
  margin: 50px 0;
  margin-top: 100px;
}
</style>
